<template>
    <div class="sea-page-column box">
        <div class="flex-box box-primary hover-shadow">
            <div class="flex-header">
                <h5>样例</h5>
                <div class="pull-right">
                    <button class="sea-btn-badge" @click="slideUp">up</button>
                    <button class="sea-btn-badge" @click="slideDown">down</button>
                    <button class="sea-btn-badge" @click="slideLeft">left</button>
                    <button class="sea-btn-badge" @click="slideRight">right</button>
                </div>
            </div>
            <div class="flex-body no-padding" style="overflow: hidden;">
                <div style="height: 160px;text-align: center;">
                    <div class="sea-transition padding"
                         style="background-color: lightblue; height: 160px; width: 320px;box-sizing: border-box;"
                         ref="bodyRef1">
                    </div>
                </div>
            </div>
            <div class="flex-footer with-padding">
                <blockquote class="blockquote-primary">
                    <h5>滑块</h5>
                    <span class="block">滑块特效就是移动位置，不会改变容器原本的高度</span>
                    <span class="block">有些时候，滑动的时候容易破坏布局</span>
                    <span class="block">如果确实宽高属性，有时候动画会失效</span>
                </blockquote>
            </div>
        </div>

        <div class="flex-box box-primary hover-shadow">
            <div class="flex-header">
                <h5>样例</h5>
                <div class="pull-right">
                    <button class="sea-btn-badge" @click="shrinkHeight">up</button>
                    <button class="sea-btn-badge" @click="shrinkWidth">right</button>
                </div>
            </div>
            <div class="flex-body no-padding" style="overflow: hidden;">
                <div class="padding sea-transition"
                     style="background-color: lightblue; height: 160px;width: 320px;float: right" ref="bodyRef2">
                    <p>
                        1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p>
                </div>
            </div>
            <div class="flex-footer with-padding">
                <blockquote class="blockquote-primary">
                    <h5>收缩</h5>
                    <span class="block">收缩特效会改变组件高度</span>
                    <span class="block">使用缺省值（auto）时，浏览器可能无法计算动画，会直接隐藏组件</span>
                </blockquote>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

import {ref} from "vue";

const bodyRef1 = ref();

const slideUp = (evt) => {
    bodyRef1.value.classList.toggle("slide-up");
}
const slideDown = (evt) => {
    bodyRef1.value.classList.toggle("slide-down");
}
const slideLeft = (evt) => {
    bodyRef1.value.classList.toggle("slide-left");
}
const slideRight = (evt) => {
    bodyRef1.value.classList.toggle("slide-right");
}


const bodyRef2 = ref();

const shrinkHeight = (evt) => {
    bodyRef2.value.classList.toggle("shrink-height");
}
const shrinkWidth = (evt) => {
    bodyRef2.value.classList.toggle("shrink-width");
}

</script>

<style lang="scss">
</style>